<script setup lang="ts">
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";
import {useCommonStore} from "@/store/common";
import {ref} from "vue";
import {reqGetChildComment, reqAddComment} from "@/api/comment";

const commentStore = useCommonStore()

const item = commentStore.commentItem

const list = ref<any>([])

const loading = ref(true)

const query = ref<any>({
  page: 1,
  limit: 10,
  commentId: 0
})

const total = ref(0)


async function getCommentList() {

  await reqGetChildComment(query.value).then((res) => {
    if (res.code == 200) {
      if (res.data.length > 0) {
        total.value = res.total
        list.value.push(...res.data)
      } else {
        loading.value = false
      }
    }
    uni.stopPullDownRefresh()
  })
}

onLoad(async (e: any) => {
  query.value.commentId = e.id
  await getCommentList();
})

onReachBottom(async () => {
  if (loading.value) {
    query.value.page++
    await getCommentList();
  }
})

onPullDownRefresh(async () => {
  query.value.page = 1
  list.value = []
  loading.value = true
  await getCommentList();
})


const info = ref({
  goodsId: item.goodsId,
  content: '',
  topCommentId: '',
  replyUserId: item.userId,
  parentId: null
})
onLoad((e: any) => {
  info.value.topCommentId = e.id
  info.value.parentId = e.id
})

const send = async () => {
  if (info.value.content.trim()) {
    await reqAddComment(info.value).then((res: any) => {
      if (res.code == 200) {
        loading.value = true
        query.value.page = 1
        list.value = []
        getCommentList()
        info.value.content = ''
      } else {
        uni.showToast({
          title: "评论错误，请稍后重试",
          icon: 'none'
        })
      }
    })
  } else {
    uni.showToast({
      title: '请输入内容',
      icon: 'none'
    })
  }
}
const handle = (res: any) => {
  placeholder.value = '@回复' + item.userNickname
  info.value.replyUserId = res.userId
  info.value.parentId = res.id
  focus.value = true
}
const blur = () => {
  info.value.replyUserId = item.userId
  info.value.parentId = info.value.topCommentId
  placeholder.value = '请输入内容'
}
const placeholder = ref('请输入内容')
const focus = ref(false)
</script>

<template>
  <view class="bar"></view>

  <view class="containers">

    <comment-item
        :item="item"
        :padding="20"
        @replay-info="handle"
    ></comment-item>

    <view style="background: white;margin-top: 20rpx;padding: 20rpx;font-weight: 600">
      全部回复（{{ total }}）
    </view>
    <comment-item
        v-if="list.length> 0"
        v-for="(item,index) in list"
        :key="item.id"
        :item="item"
        @replay-info="handle"
        :replay="true"
        :showBottom="true"
        :padding="20"
    ></comment-item>
    <u-empty
        style="background: white"
        v-else
        mode="comment"
        icon="http://cdn.uviewui.com/uview/empty/comment.png"
    >
    </u-empty>
    <view class="input">
      <u-input
          style="flex: 1;"
          :placeholder="placeholder"
          border="surround"
          :focus="focus"
          @blur="blur()"
          v-model="info.content"
      ></u-input>
      <u-button @click="send()" style="width: 150rpx" type="warning" text="发送"></u-button>
    </view>
    <u-divider
        v-if="!loading && list.length> 0"
        text="没有更多数据了~"
    ></u-divider>
  </view>
</template>

<style scoped lang="scss">
.containers {
  width: 100vw;
  background: #eeeded;

  .input {
    display: flex;
    position: fixed;
    bottom: 10rpx;
    width: 100vw;
    height: 75rpx;
    background: white;
  }

}
</style>
